<!DOCTYPE html>
<html lang="en">

<head>
 <meta charset="UTF-8">
 <meta name="viewport"
  content="width=device-width, initial-scale=1.0, minimum-scale=1,maximum-scale=1,user-scalable=no">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title data-ch="恐龙探险" data-en="Dinosaur Adventure" class="document_title">恐龙探险</title>
 <script src="js/jquery-3.3.1.min.js"></script>
 <script src="js/common.js"></script>
 <script src="js/rem.js"></script>
 <script src="js/layer.js"></script>
 <script type="text/javascript">
  isLogin();
 </script>
 <link rel="stylesheet" href="css/common.css">
 <link rel="stylesheet" href="css/index.css">
</head>

<body>
 <!--头部-->
 <div class=" jui_top_bar">
  <a class="jui_top_left" href="javascript:history.back(-1)"><img src="icons/back.png"></a>
  <div class="jui_top_middle font_weight" data-ch="申诉" data-en="Appeal">申诉</div>
 </div>
 <!-- 头部end -->
 <!-- 内容部分 -->
 <div class="shensu_box jui_main padding_032">
  <div class="latout_mask shensu_main border_radius05">
   <div class="f30 col_fff" data-ch="申诉原因" data-en="Reason">申诉原因</div>
   <textarea class="shensu_text" name="" id="" cols="30" rows="4"></textarea>
   <div class="flex_be shensu_upload">
    <div class="shnesu_upload_name col_fff" data-ch="上传截图" data-en="Upload image">上传截图</div>
    <input class="shensu_upload_input" disabled type="text" value="">
   </div>
   <div class="zhuan_jirou_btn border_radius05 col_fff text_center" data-ch="呈上" data-en="Submit">呈上</div>
   <!-- 申诉细节 -->
   <div class="shensu_xijie col_fff">
    <div class="shensu_xijie_title col_fff" data-ch="申诉细节" data-en="Appeal Details">申诉细节</div>
    <div class="shensu_xijie_list">
     <div class="shensu_list_title col_fff" data-ch="1)捕猎者汇款了, 释放者在11pm还不解放恐龙?"
      data-en="1)If seller has yet to release by 11PM">
      1)捕猎者汇款了, 释放者在11pm还不解放恐龙?</div>
     <div class="shensu_list_answer col_fff">
      <div class="shensu_list_answer_div">•</div>
      <div class="col_fff" data-ch="请捕猎者上传汇款截图, 并写下申诉原因"
       data-en="Buyer may upload the bank receipt and fill in appeal reason">
       请捕猎者上传汇款截图, 并写下申诉原因</div>
     </div>
    </div>
    <div class="shensu_xijie_list">
     <div class="shensu_list_title col_fff" data-ch="2)捕猎者不汇款?" data-en="2)No payment received from buyer">2)捕猎者不汇款?
     </div>
     <div class="shensu_list_answer">
      <div class="shensu_list_answer_div">•</div>
      <div class="col_fff" data-ch="请释放者在11pm之后务必上传交易细节截图, 并写下申诉原因"
       data-en="After 11PM, seller may upload screenshot of “Transaction Details” and submit for further investigation">
       请释放者在11pm之后务必上传交易细节截图, 并写下申诉原因</div>
     </div>
    </div>
    <div class="shensu_xijie_list">
     <div class="shensu_list_title col_fff" data-ch="3)提早在11pm前按"申诉"键即将无法生效, 此交易将会以正常方式运作"
      data-en="3)Appeal button is not available before 11pm">3)提早在11pm前按"申诉"键即将无法生效,
      此交易将会以正常方式运作</div>
    </div>
   </div>
  </div>

  <!-- 上传截图弹窗 -->
  <div class="shensu_mask_box display_none border_radius05">
   <div class="shensu_main">
    <div class="shensu_top">
     <img class="shensu_top_img" src="./icons/addImg.png" alt="">
    </div>
    <div class="shensu_mask_btn col_fff border_radius05" data-ch="确认" data-en="Confirm">确认</div>
   </div>
  </div>
 </div>

 <script>
  $(function(){
   var inputSrc;
   // 上传图片
   var input = document.createElement('input');
   var imgSrc;
   input.type = 'file';
   input.accept = 'image/*';
   $(".shensu_top").on('click', function () {
    var reader = new FileReader();
    input.onchange = function() {
     var file = this.files[0];
     // console.log(file.name);
     if(!/(jpg|png|jpeg)$/.test(file.name)) {
      box_timer(localStorage.getItem("language_type") == 1 ? '仅支持png,jpg格式图片' : 'Only support png/jpg format files')
      return;
     }
     reader.readAsDataURL(file);
     reader.onload = function() {
      $(".shensu_top_img").attr('src', this.result);
      imgSrc = file;
     }
     input = document.createElement('input');
     input.type = 'file';
     input.accept = 'image/*';
    }
    input.click();
   });

   // 点击"上传载图",显示弹框
   $(".shnesu_upload_name").click(function(){
    $(".shensu_mask_box").removeClass("display_none")
   })

   // 点击弹窗"确定"按钮, 弹窗消失, 并将图片路径放入对应位置
   $(".shensu_mask_btn").click(function(){
    console.log(imgSrc)
    $(".shensu_mask_box").addClass("display_none")
    
    var data = {
     image: imgSrc,
     uid: localStorage.getItem("u_id"),
     token: localStorage.getItem("token"),
     language_type: localStorage.getItem("language_type")
    }
    var formdata = new FormData();
    for(let attr in data) {
     formdata.append(attr, data[attr])
    }
    $.ajax({
     type: 'post',
     url: baseURL + '/index.php?m=user&c=uploads',
     data: formdata,
     contentType: false, processData: false,
     success: function success(data){
      data = JSON.parse(data);
      is_login(data);
      if(data.code != 1){
       box_timer(data.msg);
      }
      inputSrc = data.img_url;
      $(".shensu_upload_input").attr("value", inputSrc);
     }
    })
   })

   $(".zhuan_jirou_btn").click(function(){
    var data = {
     uid: localStorage.getItem("u_id"),
     token: localStorage.getItem("token"),
     language_type: localStorage.getItem("language_type"),
     m_infos: $(".shensu_text").val(),
     m_img: inputSrc,
     m_did: window.location.href.split("=")[1]
    }
    $.ajax({
     type: 'post',
     url: baseURL + '/index.php?m=user&c=appeal',
     data: data,
     success: function success(data){
      data = JSON.parse(data);
      is_login(data);
      box_timer(data.msg)
      if(data.code ==1){
      	setTimeout(function(){
          window.history.go(-1) // 返回上一页
         },1500)
      }
     }
    })
   })

   language();
   documentName()
  })
  
 </script>
</body>

</html>